<template>
  <div class="dashboard-container">
    <div class="app-container">
      <div style="display: flex; justify-content: space-between">
        <el-form :inline="true" :model="query" class="demo-form-inline" size="small">
          <el-form-item label="关键字">
            <el-input v-model="query.keyword" placeholder="请根据文章标题搜索"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="query.state" placeholder="请选择">
              <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="clearForm">清除</el-button>
            <el-button type="primary" size="small" @click="search">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-button style="width: 97px; height: 32px" @click="addNew" type="success" icon="el-icon-edit" size="small">新增技巧</el-button>
      </div>
      <el-row>
        <div class="searchinfo"><i class="el-icon-info"></i>共 {{ totalNum }} 条记录</div>
      </el-row>
      <template>
        <el-table :data="lists" style="width: 100%">
          <el-table-column type="index" width="80" label="序号"></el-table-column>>
          <el-table-column label="文章标题">
            <template slot-scope="scope">
              {{ scope.row.title }}
              <i class="el-icon-film" @click="palyVideo(scope.row.videoURL)" style="color: blue" v-if="scope.row.videoURL"></i>
            </template>
          </el-table-column>
          <el-table-column prop="visits" label="阅读数"> </el-table-column>
          <el-table-column prop="username" label="录入人"> </el-table-column>
          <el-table-column prop="createTime" label="录入时间">
            <template slot-scope="scope">
              {{ scope.row.createTime | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              {{ Number(scope.row.state) === 1 ? '已启用' : '已禁用' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="text" @click="showDetail(scope.row)">预览</el-button>
              <el-button type="text" @click="changeState(scope.row)">{{ Number(scope.row.state) === 1 ? '禁用' : '启用' }}</el-button>
              <el-button type="text" @click="editArticle(scope.row)" :disabled="Number(scope.row.state) === 1">修改</el-button>
              <el-button type="text" @click="deleteArticle(scope.row.id)" :disabled="Number(scope.row.state) === 1">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <fenye :totalNum="totalNum" :page="query.page" :pagesize="query.pagesize" @changeFenYe="changeFenYe"></fenye>
      <detail :dialogVisible.sync="dialogVisible" :article="activeArticle"></detail>
      <editarticle :showEdit.sync="showEdit" :article="activeArticle" @clear="clear"></editarticle>
      <div class="video-preview" v-if="isPlay">
        <div class="upvideo">
          <video :src="videoSrc" controls="controls" class="video"></video>
          <el-button @click="isPlay = false" type="info" icon="el-icon-close" circle size="media"></el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/articles.js'
import { status } from '@/api/hmmm/constants.js'
import detail from './articlecomponent/detail.vue'
import editarticle from './articlecomponent/edit.vue'
import fenye from './companycomponents/fenye.vue'
export default {
  name: 'mianshijiqiao',
  components: {
    detail,
    editarticle,
    fenye
  },
  data () {
    return {
      status: [],
      query: {
        keyword: '',
        state: '',
        page: 1,
        pagesize: 5
      },
      totalNum: 0,
      lists: [],
      dialogVisible: false,
      showEdit: false,
      activeArticle: {},
      isPlay: false,
      videoSrc: ''
    }
  },
  filters: {
    dateFormat (val) {
      const date = new Date(val)
      const year = date.getFullYear()
      let month = date.getMonth() + 1
      month = month < 10 ? '0' + month : month
      let day = date.getDate()
      day = day < 10 ? '0' + day : day
      return `${year}-${month}-${day}`
    }
  },
  created () {
    this.status = status
    this.init()
  },
  methods: {
    palyVideo (val) {
      console.log(val)
      this.videoSrc = val
      this.isPlay = true
    },
    changeFenYe (val) {
      this.query.page = val.page
      this.query.pagesize = val.pagesize
      this.init()
    },
    deleteArticle (id) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({
            id: id
          })
          // 处理删除导致总页数减少的情况
          if (this.query.page > Math.ceil((this.totalNum - 1) / this.query.pagesize)) this.query.page = this.query.page - 1
          this.init()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    async changeState (val) {
      await changeState({
        id: val.id,
        state: Number(val.state) === 1 ? 0 : 1
      })
      this.$message({
        message: Number(val.state) === 1 ? '禁用成功' : '启用成功',
        type: 'success'
      })
      this.init()
    },
    showDetail (val) {
      this.activeArticle = val
      this.dialogVisible = true
    },
    editArticle (val) {
      this.activeArticle = val
      this.showEdit = true
    },
    clear () {
      this.activeArticle = {}
      this.init()
    },
    addNew () {
      this.activeArticle = {}
      this.showEdit = true
    },
    search () {
      this.init()
    },
    clearForm () {
      this.query.keyword = ''
      this.query.state = ''
    },
    async init () {
      // 处理查询参数
      const keys = Object.keys(this.query)
      const newQuery = {}
      keys.forEach((item) => {
        if (this.query[item] || this.query[item] === 0) newQuery[item] = this.query[item]
      })
      const { data } = await list(newQuery)
      this.totalNum = data.counts
      this.lists = data.items
    }
  }
}
</script>

<style scoped lang='scss'>
.dashboard-container {
  background-color: #f0f2f5;
  padding: 20px;
  .app-container {
    background-color: #fff;
  }
}
::v-deep .el-form-item__label {
  width: 80px;
}
.searchinfo {
  color: #ccc;
  padding: 10px;
  border-radius: 3px;
  background-color: #f4f4f5;
  i {
    margin-right: 10px;
    color: #909399;
  }
}
.video-preview {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 9999;
}

::v-deep .el-button--info {
  z-index: 999;
  display: none;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid rgba(0, 0, 0, 0.35);
}
.upvideo:hover .el-button {
  display: block;
}
.upvideo {
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
